<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法 插值表达式 data methods computed watch</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
        <h1>知识点1:插值表达式</h1>
        <p>我是变量：{{msg}}</p>
        <p>我是表达式{{56-89}}</p>
        <p>我是表达式{{num+1}}</p>
        <p>我是条件运算符{{1+1==2?'true':'falese'}}</p>
        <p>我是方法{{add()}}</p>
        <h1>知识点2:data</h1>
            <h3>在控制台中可以通过实例名.$data的形式来访问或修改data数据。</h3>

        <h1>知识点3：methods</h1>
            <h3>方法名(){}或 方法名:function（）{}</h3>
            <p>{{sub(23)}}</p>
        <h1> 知识点4:computed 计算机属性</h1>
            <h3>遇到复杂的逻辑时，vue.js框架提倡视同compute计算属性,在一个计算属性里面可以
                完成各种复杂的逻辑,包括逻辑运算或函数调用,最终只返回一结果就可以了

            </h3>
            <p>{{rev}}</p>
            <p>{{double}}</p>
            <h3>计算属性是基于其依赖值进行缓存的，计算属性只有在它相关的依赖发生改变时才会重新求值
                而方法则是在每次页面进行重新渲染时都会进行计算
            </h3>
            <button @click="double=100"> 我们来尝试修改一下double</button>
            <h3>绝大多数少情况下,只会使用默认的get函数来读取一个计算属性,在书记业务中很少使用到set
                所以通常在使用计算属性时m不必将get和set都申明
            
            </h3>
            <h1>知识点5：watch</h1>
                <h3>当我们需要再状态变化时,执行一些其他的操作，watch只有状态监听功能
                    只要监听到当前vue实例中的数据变化m机会调用当前数据所绑定的方法
                </h3>
                <h4>1.函数监听器,在watch选项中声明的函数即为函数式监听器,其中函数名就是我们要监听的对象</h4>
                <h4>2.对象监听器：在watch选项中申明的对象即为对象式侦听器,其中对象名就是我们要侦听的对象</h4>
                <h4>对象式侦听器中还有俩个参数,deep(ture:深层次侦听子对象)immediate(ture:不管对象有没有改变,都先执行一遍)</h4>
                <h4>如果监听的需求比较简单，也不会涉及日后的扩展问题,可以使用函数式侦听器
                    如果监听的需求比较复杂,比如有多层对象，或者需要立即执行，或者方便日后扩展，就使用函数式监听器
                </h4>
    </div>
</body>
</html>sss
<script>

    const  appConn = Vue.createApp({
        data() {
            return {
                msg:'我的第一个vue页面',
                num:1,
                grade:60,
                user:{
                    name:'艾aa',
                    age:23

                }
            }
        },
        methods: {
            add(){
                return this.num+100

            },
            sub:function(val){
                return this.num -val

            },
            remethods(){
                console.log("我是remethods方法被调用1次")
               return this.msg.split('').reverse().join('')
            }
        },  
        computed:{
            rev(){
                return this.msg.split('').reverse().join('')

            },
            // double(){

            //     return this.num *2
                

            // }
            double:{
                get:function(){
                    return this.num*2

                },
                set:function(val){
                    this.num=val/2

                }


            }

        },
        watch:{
            // 函数式监听器
            grade(newData,oldData){
                console.log("更新之前的数据为"+oldData);
                console.log("更新的数据为"+newData);
                if(newData>oldData){
                    console.log("有进步")

                }else{
                    console.log("有罪！有罪！！！！！")
                }

            },
            "users.age":{
                handler(newData,oldData){
                    console.log("更新之前的数据为"+oldData);
                    console.log("更新的数据为"+newData);
                    if(newData>120){
                        console.log("老不死的快进来爽吧")

                    }
                    
                }


            }
        }


    }).mount("#app")

</script>